<extend name="Base/common"/>

<block name="header">

</block>

<block name="side">
    <!-- 左侧 nav-->
</block>
<block name="body">

        <div class="hanqing">
            <div class="nk">
            <ul>
                <li>所有</li>
                <li>新币上市</li>
                <li>市值趋势</li>
            </ul>
            </div>
        </div>
    <volist name='list' id='value'>
    <ul>
        <li>{$value.chengjiaoliang}</li>
        <li>{$value.zongshizhi}</li>
        <li>{$value.GBIzhishu}</li>
    </ul>
    </volist>
    <div id="main" style="width:90%;height:500px;margin-left: 5%;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
    var upColor = '#ec0000';
    var upBorderColor = '#8A0000';
    var downColor = '#00da3c';
    var downBorderColor = '#008F28';

    var dataCount = 2e5;
    var data = generateOHLC(dataCount);

    var option = {
        dataset: {
            source: data
        },
        grid: [
            {
                left: '3%',
                right: '2%',
                bottom: 20,
                height: 400,
            },
            {
                left: '3%',
                right: '2%',
                height: 30,
                bottom: 20
            }
        ],
        xAxis: [
            {
                type: 'category',
                scale: true,
                boundaryGap : false,
                // inverse: true,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },
            {
                type: 'category',
                gridIndex: 1,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [{
            type: 'inside',
            xAxisIndex: [0, 1],

        }, {
            type: 'inside',
            xAxisIndex: [0, 1],

        }],
        visualMap: {
            show: false,
            seriesIndex: 1,
            dimension: 6,
            pieces: [{
                value: 1,
                color: upColor
            }, {
                value: -1,
                color: downColor
            }]
        },
        series: [
            {
                type: 'candlestick',
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                },
                encode: {
                    x: 0,
                    y: [1, 4, 3, 2]
                }
            },
            {
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    color: '#7fbe9e'
                },
                large: true,
                encode: {
                    x: 0,
                    y: 5
                }
            }
        ]
    };

    function generateOHLC(count) {
        var data = [];

        var xValue = +new Date(2011, 0, 1);
        var minute = 60 * 1000;
        var baseValue = Math.random() * 12000;
        var boxVals = new Array(4);
        var dayRange = 12;

        for (var i = 0; i < count; i++) {
            baseValue = baseValue + Math.random() * 20 - 10;

            for (var j = 0; j < 4; j++) {
                boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
            }
            boxVals.sort();

            var idxRandom = Math.random();
            var openIdx = Math.round(Math.random() * 3);
            var closeIdx = Math.round(Math.random() * 2);
            if (closeIdx === openIdx) {
                closeIdx++;
            }
            var volumn = boxVals[3] * (1000 + Math.random() * 500);

            data[i] = [
                echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
                +boxVals[openIdx].toFixed(2), // open
                +boxVals[3].toFixed(2), // highest
                +boxVals[0].toFixed(2), // lowest
                +boxVals[closeIdx].toFixed(2),  // close
                volumn.toFixed(0),
                getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
            ];
        }

        return data;

        function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
            var sign;
            if (openVal > closeVal) {
                sign = -1;
            }
            else if (openVal < closeVal) {
                sign = 1;
            }
            else {
                sign = dataIndex > 0
                        // If close === open, compare with close of last record
                        ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
                        // No record of previous, set to be positive
                        : 1;
            }

            return sign;
        }
    }
        myChart.setOption(option);
     </script>


</block>
